import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import { Picker, List, Toast, InputItem, NavBar, WingBlank, WhiteSpace, Icon, Button, Flex } from 'antd-mobile';

export default class Checkout extends Component {
	constructor(props){
		super(props);
		this.state = {
			cancleAble : false
		}
	}

	doCheckout(){
		let { checkout } = this.props;
		let me = this;
		var FNScanner = api.require('FNScanner');
		FNScanner.openView({
			rect : {x:(api.winWidth - 200) / 2, y:82, w:200, h:200},
		    autorotation: false
		}, function(ret, err) {
			me.setState({cancleAble : true});
		    if (ret) {
		    	if (ret.eventType == 'success'){
		    		me.setState({cancleAble : false});
		    		FNScanner.closeView();
		    		checkout('100,50', ret.content);
		    	}
		    } else {
		        Toast.fail('扫描失败,请重新扫描');
		    }
		});

	}

	cancel(){
		var FNScanner = api.require('FNScanner');
		FNScanner.closeView();
		this.setState({cancleAble : false});
	}

	componentWillMount(){
		//
	}

	render() {
		return (
				<div>
					<NavBar mode="light" iconName=""
					className='my_navbar_title'
					>下课签到</NavBar>
					<div className='my_container_blank'></div>
				    <WhiteSpace size="sm" />

					 <div className='scan_container'>
					    	 
		    			<div className="scan_box">
		    				<div className="scan_box_container">
		    					<div className="tip">
		    						<div>请扫描教室二维码签退</div>
		    						<div>{this.state.success ? '扫描成功' : ''}</div>
		    					</div>
		    				</div>
		    				<WhiteSpace size="md" />
		    				<Button type="primary" onClick={(e) => {this.doCheckout();}}>签退</Button>
		    				<WhiteSpace size="sm" />
		    				{this.state.cancleAble ? <Button type="primary" onClick={(e) => {this.cancel();}}>取消</Button> : <Button type="primary" disabled>取消</Button>}
		    			</div>
					</div>

				</div>
			);
	}
}